<template>
  <!-- 饼状图 -->
  <div class="cbox" :style="`width: ${width};height:${height}`">
    <div class="three" ref="lineChart"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return [
          { value: 11, name: "上班时间" },
          { value: 15, name: "下班时间" },
          // { value: 9, name: "租赁", value1: 212 },
          // { value: 5, name: "食堂项目", value1: 2 },
          // { value: 2, name: "重点低值易耗品", value1: 26 },
          // { value: 3, name: "大修", value1: 5 },
          // { value: 6, name: "项目技术服务", value1: 7 },
          // { value: 8, name: "商品销售", value1: 8 },
        ];
      },
    },
    width: {
      type: String,
      default: "800px",
    },

    height: {
      type: String,
      default: "700px",
    },
  },
  data() {
    return {
      angle: 0,
      chartInstance: null,
    };
  },
  methods: {
    getCirlPoint(x0, y0, r, angle) {
      const x1 = x0 + r * Math.cos((angle * Math.PI) / 180);
      const y1 = y0 + r * Math.sin((angle * Math.PI) / 180);
      return {
        x: x1,
        y: y1,
      };
    },
    draw() {
      this.angle = this.angle + 3;
      this.chartInstance.setOption(this.defaultOption, true);
      // window.requestAnimationFrame(draw);
    },
  },
  computed: {
    defaultOption() {
      // let data = this.data;
      return {
        backgroundColor: "transparent",
        color: [
          "#37a2da",
          "#32c5e9",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#0CD3DB",
          "#4386FA",
          "#4FADFD",
          "#488cf7",
          "#38cafb",
          "#4caff9",
          "#646CF9",
          "#4adeca",
          "#2aa7ee",
          "#0270f2",
          "#A098FC",
          "#fb7293",
          "#e7bcf3",
          "#8378ea",
        ],
        title: [
          {
            show: false,
            text: "{a|" + 15870 + "} \n {c|总电耗（kwh）}",
            x: "center",
            y: "center",
            textStyle: {
              rich: {
                a: {
                  fontSize: 46,
                  color: "#FFFFFF",
                },

                c: {
                  fontSize: 24,
                  color: "#6392D3",
                  // padding: [5,0],
                  marginTop: 24,
                },
              },
            },
          },
          {
            show: false,
            text: "二级分项",
            // top: "1%",
            left: "1%",
            textStyle: {
              color: "#fff",
              fontSize: "12",
              fontWeight: "normal",
            },
          },
          {
            show: false,
            text: "一级分项",
            // top: "1%",
            left: "10%",
            textStyle: {
              color: "#fff",
              fontSize: "12",
              fontWeight: "normal",
            },
          },
        ],
        legend: [
          {
            // top: "4%",
            left: "1%",
            orient: "vertical", //改变排列方式
            icon: "roundRect", //改变legend小图标形状
            itemGap: 10, // 设置legend的间距
            itemWidth: 20, // 设置宽度
            itemHeight: 12, // 设置高度
            selectedMode: false,
            textStyle: { fontSize: "12", color: "#fff" }, //legend字体大小
          },

          //外环
          // {
          //   top: "4%",
          //   left: "1%",
          //   orient: "vertical", //改变排列方式
          //   icon: "roundRect", //改变legend小图标形状
          //   itemGap: 10, // 设置legend的间距
          //   itemWidth: 20, // 设置宽度
          //   itemHeight: 12, // 设置高度
          //   selectedMode: false,
          //   data: ["冷热站", "照明与插座用电其他能耗用量"],
          //   textStyle: { fontSize: "12", color: "#fff" }, //legend字体大小
          // },
          // // 内环
          // {
          //   top: "4%",
          //   left: "10%",
          //   orient: "vertical", //改变排列方式
          //   icon: "roundRect", //改变legend小图标形状
          //   itemGap: 10, // 设置legend的间距
          //   itemWidth: 20, // 设置宽度
          //   itemHeight: 12, // 设置高度
          //   selectedMode: false,
          //   data: ["特殊用电", "空调用电", "照明与插座用电"],
          //   textStyle: { fontSize: "12", color: "#fff" }, //legend字体大小
          // },
        ],

        tooltip: {
          show: true,
          textStyle: {
            // color: "#fff",
            fontSize: 22,
          },
        },

        animation: false,

        series: [
          //0.65
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                  startAngle: ((0 + this.angle) * Math.PI) / 180,
                  endAngle: ((90 + this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#8383FA",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            // name: "ring5", // 紫点
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
              const point = this.getCirlPoint(x0, y0, r, 90 + this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#8450F9", // 绿
                  fill: "#8450F9",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65,
                  startAngle: ((180 + this.angle) * Math.PI) / 180,
                  endAngle: ((270 + this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#4386FA",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            // name: "ring5", // 蓝色
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.65;
              const point = this.getCirlPoint(x0, y0, r, 180 + this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#4386FA", // 绿
                  fill: "#4386FA",
                },
                silent: true,
              };
            },
            data: [0],
          },
          //0.75
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((270 + -this.angle) * Math.PI) / 180,
                  endAngle: ((40 + -this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#0CD3DB",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              return {
                type: "arc",
                shape: {
                  cx: api.getWidth() / 2,
                  cy: api.getHeight() / 2,
                  r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                  startAngle: ((90 + -this.angle) * Math.PI) / 180,
                  endAngle: ((220 + -this.angle) * Math.PI) / 180,
                },
                style: {
                  stroke: "#FF8E89",
                  fill: "transparent",
                  lineWidth: 1.5,
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            // name: "ring5",
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              const point = this.getCirlPoint(x0, y0, r, 90 + -this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#FF8E89", // 粉
                  fill: "#FF8E89",
                },
                silent: true,
              };
            },
            data: [0],
          },
          {
            // name: "ring5", // 绿点
            type: "custom",
            coordinateSystem: "none",
            renderItem: (params, api) => {
              const x0 = api.getWidth() / 2;
              const y0 = api.getHeight() / 2;
              const r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75;
              const point = this.getCirlPoint(x0, y0, r, 270 + -this.angle);
              return {
                type: "circle",
                shape: {
                  cx: point.x,
                  cy: point.y,
                  r: 4,
                },
                style: {
                  stroke: "#0CD3DB", // 绿
                  fill: "#0CD3DB",
                },
                silent: true,
              };
            },
            data: [0],
          },
          //数据
          {
            name: "二级分项",
            type: "pie",
            radius: ["45%", "55%"],
            labelLine: {
              length: 30,
            },
            label: false,
            color: [
              "#37a2da",
              "#32c5e9",
              "#9fe6b8",
              "#ffdb5c",
              "#ff9f7f",
              "#0CD3DB",
              "#4386FA",
              "#4FADFD",
              "#488cf7",
              "#38cafb",
              "#4caff9",
              "#646CF9",
              "#4adeca",
              "#2aa7ee",
              "#0270f2",
              "#A098FC",
              "#fb7293",
              "#e7bcf3",
              "#8378ea",
            ],
            data: [
              { value: 300, name: "冷热站" },
              {
                value: 400,
                name: "照明与插座用电其他能耗用量",
              },
            ],
          },
          {
            name: "一级分项",
            type: "pie",
            radius: ["0%", "30%"],
            labelLine: {
              length: 30,
            },
            label: false,
            color: [
              "#37a2da",
              "#32c5e9",
              "#9fe6b8",
              "#ffdb5c",
              "#ff9f7f",
              "#0CD3DB",
              "#4386FA",
              "#4FADFD",
              "#488cf7",
              "#38cafb",
              "#4caff9",
              "#646CF9",
              "#4adeca",
              "#2aa7ee",
              "#0270f2",
              "#A098FC",
              "#fb7293",
              "#e7bcf3",
              "#8378ea",
            ].reverse(),
            data: [
              { value: 100, name: "特殊用电" },
              { value: 150, name: "空调用电" },
              { value: 200, name: "照明与插座用电" },
            ],
          },
        ],
      };
    },
  },

  mounted() {
    this.chartInstance = echarts.init(this.$refs.lineChart);

    const option = this.defaultOption;
    this.chartInstance.setOption(option);

    let timerId = null;
    if (timerId) {
      clearInterval(timerId);
    }
    timerId = setInterval(() => {
      this.draw();
    }, 100);
  },
};
</script>

<style lang="less" scoped>
.cbox {
  // width: 600px;
  // height: 600px;
}

.three {
  width: 100%;
  height: 100%;
}
</style>
